<template>
    <div class="swiper-container" id="submenu">
        <div class="swiper-wrapper">
            <div class="swiper-slide"
                 v-for="(item ,index) in subMenuData"
                 :key="index">
                <router-link
                        @click="handleClick(index)"
                        :to="item.path">
                    <span :class="{active:activeIndex===index}">{{item.name}}</span>
                </router-link>
            </div>
        </div>
        <!--&lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
        <!--<div class="swiper-pagination"></div>-->

        <!--&lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
        <!--<div class="swiper-button-prev"></div>-->
        <!--<div class="swiper-button-next"></div>-->

        <!--&lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
        <!--<div class="swiper-scrollbar"></div>-->
    </div>
</template>

<script>
    import Swiper from 'Swiper';

    export default {
        name: "subMenu",
        data() {
            return {
                //推荐排行榜歌单主播电台歌手新碟上架
                subMenuData: [
                    {name: '推荐', type: '', path: '/discover'},
                    {name: '排行榜', type: '', path: '/discover/toplist'},
                    {name: '歌单', type: '', path: '/discover/playlist'},
                    {name: '主播电台', type: '', path: '/discover/djradio'},
                    {name: '歌手', type: '', path: '/discover/artist'},
                    {name: '新碟上架', type: '', path: '/discover/album'}
                ],
                activeIndex: '',
            }
        }, methods: {
            handleClick(i) {
                this.activeIndex = i;
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(() => {
                let mySwiper = new Swiper('#submenu', {
                    direction: 'horizontal',
                    slidesPerView: that.subMenuData.length,
                    centeredSlides: false,
                    observer: true,
                    observeParents: true,
                });
                this.subMenuData.forEach((item, index) => {
                    if (this.$route.path === item.path) {
                        this.activeIndex = index;
                    }
                });
            });
        }, watch: {
            $route(to, from) {
                // console.log(to.path);
                this.activeIndex='';
                this.subMenuData.forEach((item, index) => {
                    if (to.path === item.path) {
                        this.activeIndex = index;
                    }
                    //path:discover有alias:'/',考虑这种情况
                    if(to.path=='/')
                        this.activeIndex =0;
                });
            }
        }
    }
</script>

<style lang="scss">
    @import "~_swiper@4.5.0@swiper/dist/css/swiper.css";

    @mixin aStyle() {
        display: inline-block;
        text-decoration: none;
        height: 100%;
        line-height: 34px;
        width: 100%;
        text-align: center;
        color: #fff;
    }

    @mixin spanStyle {
        line-height: 34px * 0.8;
        background: #9B0909;
        display: inline-block;
        width: 100%;
        border-radius: 10%;
        height: 80%;
    }

    #submenu {
        border-radius: 5px 5px 0 0;
        background: #C20C0C;
        height: 34px;
        .swiper-wrapper {
            /*height: 100%;*/
            .swiper-slide {
                a {
                    @include aStyle;
                    span.active {
                        @include spanStyle;
                    }
                    &:hover {
                        @include aStyle;
                        @media (min-width: 768px) {
                            span {
                                @include spanStyle;
                            }
                        }
                    }

                }
            }
        }
    }
</style>